<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <title></title>
    <link href="../../css/lanai-ui.css" rel="stylesheet"/>
</head>
<body>
<section class="content no-padding">
    <div class="box box-widget no-shadow">
        <div class="box-body">
            <h3>进度条颜色</h3>
            <div class="row">
                <div class="col-sm-12">
                    <div class="progress">
                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                             class="progress-bar progress-bar-green" role="progressbar" style="width: 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20"
                             class="progress-bar progress-bar-aqua" role="progressbar" style="width: 20%">
                            <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60"
                             class="progress-bar progress-bar-yellow" role="progressbar" style="width: 60%">
                            <span class="sr-only">60% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80"
                             class="progress-bar progress-bar-red" role="progressbar" style="width: 80%">
                            <span class="sr-only">80% Complete</span>
                        </div>
                    </div>
                </div>
            </div>
            <h3>进度条尺寸</h3>
            <div class="row">
                <div class="col-sm-12">
                    <div class="progress">
                        <div aria-valuemax="100" aria-valuemin="0"
                             aria-valuenow="40" class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" style="width: 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                    <div class="progress progress-sm active">
                        <div aria-valuemax="100" aria-valuemin="0"
                             aria-valuenow="20" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: 20%">
                            <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress progress-xs">
                        <div aria-valuemax="100" aria-valuemin="0"
                             aria-valuenow="60" class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: 60%">
                            <span class="sr-only">60% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="progress progress-xxs">
                        <div aria-valuemax="100" aria-valuemin="0"
                             aria-valuenow="60" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" style="width: 60%">
                            <span class="sr-only">60% Complete (warning)</span>
                        </div>
                    </div>
                </div>
            </div>
            <h3>纵向进度条&尺寸</h3>
            <div class="row">
                <div class="col-sm-12">
                    <div class="progress vertical active">
                        <div aria-valuemax="100" aria-valuemin="0"
                             aria-valuenow="40" class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" style="height: 40%">
                            <span class="sr-only">40%</span>
                        </div>
                    </div>
                    <div class="progress vertical progress-sm">
                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20"
                             class="progress-bar progress-bar-success" role="progressbar" style="height: 100%">
                            <span class="sr-only">100%</span>
                        </div>
                    </div>
                    <div class="progress vertical progress-xs">
                        <div aria-valuemax="100" aria-valuemin="0"
                             aria-valuenow="60" class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="height: 60%">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                    <div class="progress vertical progress-xxs">
                        <div aria-valuemax="100" aria-valuemin="0"
                             aria-valuenow="60" class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" style="height: 60%">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                </div>
            </div>
            <h3>带文字的进度条</h3>
            <div class="row">
                <div class="col-sm-12">
                    <div class="progress-group">
                        <span class="progress-text">项目进度</span>
                        <span class="progress-number"><b>160</b>/200</span>
                        <div class="progress sm">
                            <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
                        </div>
                    </div>
                    <!-- /.progress-group -->
                    <div class="progress-group">
                        <span class="progress-text">工程进度</span>
                        <span class="progress-number"><b>310</b>/400</span>
                        <div class="progress sm">
                            <div class="progress-bar progress-bar-red" style="width: 80%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/lanai-ui.js"></script>
</body>
</html>
